<template>
  <a-modal style="top: 10px;" :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }" :title="title"
    :width="1200" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button v-if="cancelText" @click="visible = false">{{ cancelText }}</a-button>
      <!-- <a-button v-if="okText == '保存'" type="primary" :loading="button_loading" @click="handleSubmit">{{ okText }}</a-button>-->
      <a-button v-if="okText == '关闭'" type="primary" @click="visible = false">{{ okText }}</a-button>
    </a>

    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-descriptions title="" :column="1">
          <a-descriptions-item>
            <span slot="label" class="fore-descriptions-item-label">举报人</span>
            {{ infoData.informant }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fore-descriptions-item-label">举报电话</span>
            {{ infoData.informantPhone }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fore-descriptions-item-label">举报时间</span>
            {{ infoData.informantTime }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fore-descriptions-item-label">所属板块</span>
            {{ infoData.DepartmentName }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fore-descriptions-item-label">举报备注</span>
            {{ infoData.informantRemark }}
          </a-descriptions-item>
          <a-descriptions-item>
            <span slot="label" class="fore-descriptions-item-label">现场图片</span>
            <span v-for="(photo, index) in infoData.ProjectPhotos" :key="index">
              <a-popover title="">
                <template slot="content">
                  <img :src="getImg(photo.url)" width="300px" height="auto" alt="" />
                </template>
                <img :src="getImg(photo.url)" width="150px" height="150px" alt="" style="margin: 20px"/>
              </a-popover>
            </span>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { mapActions, mapGetters } from 'vuex'
import { tranDate } from '@/utils/util'

import { ExportBAB, ExportGSP, ExportJSDWCRS, ExportSGDWCRS } from '@/api/project'

export default {
  components: {},
  props: {
    actionType: {
      type: String,
      required: false,
      default: 'add'
    }
  },
  created() { },
  mounted() { },
  data() {
    return {
      a: null,
      action: 'add',
      headers: {},
      currentId: null,
      CodeDisabled: false,
      required: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      title: '查看',
      visible: false,
      okText: '保存',
      cancelText: '取消',
      infoData: {},
      tranDate: tranDate
    }
  },
  watch: {},
  computed: { ...mapGetters(['token']) },
  methods: {
    view(data) {
      Object.assign(this, {
        spinning: true,
        visible: true,
        CodeDisabled: false,
        currentId: data.id,
        title: '查看'
      })
      this.initData(data)
      this.buttonText(this.actionType)
    },
    initData(data) {
      this.spinning = false
      let info = data
      info.ProjectPhotos.map(photo => {
        photo.url = `${photo.Path}/${photo.NewFileName}`
      })
      this.infoData = info
    },
    buttonText(actionType) {
      if (actionType == 'view') {
        this.okText = '关闭'
        this.cancelText = null
      } else {
        this.okText = '保存'
        this.cancelText = '关闭'
      }
    },

    exportXls(str) {
      const _this = this
      const param = { projectID: _this.infoData.id }
      switch (str) {
        case 'ExportBAB':
          ExportBAB(param)
            .then(res => {
              const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
              window.open(a)
            })
            .finally(() => {
              this.spinning = false
            })
          break;
        case 'ExportGSP':
          ExportGSP(param)
            .then(res => {
              const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
              window.open(a)
            })
            .finally(() => {
              this.spinning = false
            })
          break;
        case 'ExportJSDWCRS':
          ExportJSDWCRS(param)
            .then(res => {
              const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
              window.open(a)
            })
            .finally(() => {
              this.spinning = false
            })
          break;
        case 'ExportSGDWCRS':
          ExportSGDWCRS(param)
            .then(res => {
              const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
              window.open(a)
            })
            .finally(() => {
              this.spinning = false
            })
          break;
        default:
          break;
      }


    },
    getImg(str) {
      const url = `${process.env.VUE_APP_API_BASE_URL}${str}`
      return url
    }
  },
}
</script>
<style lang="less" scoped>
.ant-card {
  /deep/.ant-card-small>.ant-card-body {
    padding: 0 12px;
  }

  /deep/.ant-card-head-wrapper {
    line-height: 16px;
  }
}

/deep/.ant-tabs-nav .ant-tabs-tab {
  font-size: 15px;
  font-weight: bold;
}

/deep/.ant-popover-inner-content {
  padding: 0;
}

.ant-form-item {
  margin-bottom: 4px;
}

.avatar-uploader>.ant-upload {
  width: 104px;
  height: 104px;
}

.ant-upload-list-picture-card-container {
  width: 104px;
  height: 104px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.notclickn {
  pointer-events: none;
}

.spin-content {
  margin: 10px;

  .ability {
    .checkbox {
      padding-bottom: 10px;

      .remark_input {
        margin-left: 10px;
        width: 180px;
      }
    }

    .checkbox2 {
      /deep/.ant-checkbox-group-item {
        display: block;
        margin-bottom: 5px;
      }
    }

    .title_top {
      color: @primary-color;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .bottom_dash {
      border-bottom: 1px dashed #d6d5b7;
    }

    .right_dash {
      border-right: 1px dashed #d6d5b7;
    }
  }

  /deep/.ant-tabs .ant-tabs-left-bar .ant-tabs-ink-bar {
    height: 0px !important;
  }

  /deep/.ant-card-head {
    border-bottom: none;
  }

  /deep/.ant-tabs-nav .ant-tabs-tab-active {
    background-color: #3b5998;
    color: #ffffff;
  }

  /deep/.ant-tabs-nav .ant-tabs-tab:hover {
    background-color: #3b5998 !important;
  }

  .card_title {
    font-size: 15px;
    font-weight: 900;
    color: @primary-color;
  }
}

.viewless {
  /deep/.ant-input-group-addon {
    display: none;
  }

  /deep/.ant-input-number {
    border: none;
    background: transparent;
  }

  /deep/.ant-input {
    border: none;
    background: transparent;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /deep/.ant-input-disabled {
    color: rgba(0, 0, 0, 0.65);
    cursor: default;
  }

  /deep/.ant-select-disabled {
    color: rgba(0, 0, 0, 0.65);
  }

  // /deep/.ant-modal-content {
  //   pointer-events: unset;
  // }
  /deep/.ant-select-selection--single {
    border: none;
    background: transparent;
  }

  /deep/.ant-select-arrow .ant-select-arrow-icon {
    display: none;
  }

  /deep/.anticon {
    display: none;
  }

  /deep/.vue-treeselect div,
  .vue-treeselect span {
    border: none;
  }

  /deep/.vue-treeselect__x-container {
    display: none;
  }

  /deep/.vue-treeselect__control-arrow-container {
    display: none;
  }

  /deep/.fore-timeline-item {
    position: relative;
    margin: 0;
    padding: 0 0 20px;
    font-size: 14px;
    list-style: none;
    left: 100px;
    top: -20px;
  }
}


.fore-descriptions-item-label {
  font-weight: bolder;
}
</style>
